@keyframes search-appear
  from
    opacity 0
  to
    opacity 1

.p-search
  user-select none
  overflow-x hidden
  overflow-y scroll
  background var(--color-spinner-back)
  animation search-appear 0.6s ease
  position fixed
  top s('calc(3em + %s)', $progress_height)
  left 0
  width 100%
  height s('calc(100% + 1px - 3em - %s)', $progress_height)
  z-index zIndex(5)
  display none
  &.active
    display block

.p-search-dialog
  pointer-events none
  margin 20vh auto
  max-width 50%

.p-search-dialog-bar, .p-search-dialog-result
  background var(--color-background)
  border-radius $gap * 0.5
  border 1px solid var(--color-clear)
  overflow hidden

.p-search-dialog-bar
  line-height 2
  font-size 1.5em
  height 2em
  margin-bottom 2em

.p-search-dialog-button
  float right
  cursor pointer
  pointer-events all
  width 5em
  text-align center
  background var(--color-clear)
  @media (min-width: $app_mobile_width_min)
    &:hover
      background var(--color-text)
      color var(--color-background)

.p-search-dialog-input
  pointer-events all
  display block
  border none
  background-color transparent
  color var(--color-text)
  font-size 1em
  line-height 2
  padding 0 0.5em
  width calc(100% - 5em)
  transition all 0.6s
  &:focus
    outline none
    box-shadow inset 0 0 $gap * 0.5 $gap * 0.25 var(--color-clear)

.p-search-dialog-result
  pointer-events all
  > div
    user-select text
    padding 3em
    padding-bottom 3.5em
    border-bottom 1px solid var(--color-clear)
    &:last-child
      border-bottom none
    strong
      color var(--color-search-highlight)
      text-decoration underline
    @media (min-width: $app_mobile_width_min)
      a
        font-size 1.5em
        display inline-block
        &:after
          content ''
          display block
          margin-top -1px
          width 0
          height 1px
          background var(--color-link)
          transition width 0.6s
        &:hover
          &:after
            width 100%
  .message
    user-select none
    padding 2em
    text-align center
    font-size 2em

@media (max-width: $app_mobile_width)
  .p-search-dialog
    max-width 100%
    margin 0
  .p-search-dialog-bar, .p-search-dialog-result
    border-radius 0
  .p-search-dialog-bar
    margin-bottom 0
    font-size 1em
    line-height 3
    height 3em
  .p-search-dialog-input
    line-height 3
    padding 0 1em
  .p-search-dialog-result
    > div
      padding 1em
      padding-bottom 1em
    .message
      padding 2em 1em
      text-align center
      font-size 1.5em
